<template>
    <div class="todo-main">
        <ul>
            <MyItem v-for="todoObj of tableData"
                    :key="todoObj.id"
                    :todo="todoObj"
                    :handle-check-table-data="handleCheckedTableData"
                    :handle-delete-data="handleDeleteData"
            ></MyItem>
        </ul>
    </div>
</template>

<script>
    import MyItem from './MyItem'

    export default {
        name: "MyList",
        components: {
            MyItem
        },
        props: ['tableData', 'handleCheckedTableData', 'handleDeleteData']
    }
</script>

<style scoped>
    .todo-main {
        border: 1px solid #cccccc;
        border-radius: 2%;
        margin-top: 10px;
    }
</style>